<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="author" content="Steper Kuo">
	<title>Demo: Test setTimeout and setInterval in different browser</title>

	<!-- Favicons -->
	<link rel="apple-touch-icon" sizes="152x152" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/apple-icon-152x152.png">
	<link rel="icon" type="image/png" sizes="16x16" href="https://gyx8899.github.io/YX-WebThemeKit/assets/img/favicon-16x16.png">

	<!-- Style custom *** CSS -->
	<style data-toggle="previewCode" data-target="#demoWrap" type="text/css">
		/* Demo's CSS here */
	</style>

	<!--Jquery.js, HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
	<!--[if lt IE 9]>
	<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	<script src="//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	<![endif]-->

</head>
<body>
<!-- Script Preload code *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/fn-pre-loader/preLoader.js?type=split-ssc"></script>

<!-- Script Fundebug code *** JS -->
<script src="https://js.fundebug.cn/fundebug.0.3.6.min.js" apikey="f3b60739271056d85641a316cd13350f5960922b510427e3ec514bc3f0a74ac5"></script>

<main>

	<!-- Demos -->
	<section id="demos">
		<div class="row">
			<div id="demoWrap" class="large-12 columns">
				<h3 id="overview">Overview</h3>
				<div data-toggle="previewCode" data-target="#demoWrap">
					<!--Demo's html here-->
					<div id="c_countdown" class="countdown hidden-xs hidden-xp">
						<div><span id="c_day"></span>days</div>
						<div><span id="c_hrs"></span>hrs</div>
						<div><span id="c_min"></span>mins</div>
						<div><span id="c_sec"></span>secs</div>
					</div>
				</div>
				<!--Introduction here-->
				<p>

				</p>
			</div>
		</div>
	</section>
</main>

<!-- Script Common *** JS -->
<script src="https://gyx8899.github.io/YX-JS-ToolKit/dist/assets/js/common.min.js"></script>

<!-- Script Config *** JS -->
<script src="https://gyx8899.github.io/YX-WebThemeKit/assets/js/yx-theme-config.min.js"></script>

<!-- Script Demo *** JS -->
<script data-toggle="previewCode" data-target="#demoWrap" type="text/javascript">
	// Demo's JS here
	var beginDateTime = "2017-10-23T20:00:00.000";
	var now, before = new Date();
	//	var delay = 10000;
	var delay = 1000;
	//	var delay = 100;
	//	var delay = 10;

	$(document).ready(function () {
		//		1.
		//		window.setInterval(
		//				function ()
		//				{
		//					startCountdown("c_day", "c_hrs", "c_min", "c_sec", "c_countdown", "c_watch", (new Date(beginDateTime).getTime() - new Date().getTime()) / 1000);
		//				}
		//				, delay);
		//		2.1
		//		startCountdown("c_day", "c_hrs", "c_min", "c_sec", "c_countdown", "c_watch", (new Date(beginDateTime).getTime()));
		//		3.1
		startCountdown("c_day", "c_hrs", "c_min", "c_sec", "c_countdown", "c_watch", (new Date(beginDateTime).getTime() - new Date().getTime()) / 1000);
	});


	//start count down for Event page, video page, live event page.
	function startCountdown(day, hrs, min, sec, countdownBox, watchBtn, time)
	{
		// 2.1
		//		now = new Date().getTime();
		//		var oldTime = time;
		//		time = Math.round((time - now) / 1000);

		// 3.1
		now = new Date();
		var elapsedTime = (now.getTime() - before.getTime());

		if (elapsedTime > delay)
		{
			// Recover the motion lost while inactive
			time -= Math.round(elapsedTime / 1000);
		}
		else
		{
			time--;
		}
		console.log("ElapsedTime: " + elapsedTime + "    Counttime(second) : " + time);

		before = now;

		var d = parseInt(time / 24 / 3600);
		var h = parseInt((time - d * 24 * 3600) / 3600);
		var m = parseInt((time - d * 24 * 3600 - h * 3600) / 60);
		var s = parseInt(time - d * 24 * 3600 - h * 3600 - m * 60);
		document.getElementById(day).innerHTML = d;
		document.getElementById(hrs).innerHTML = h;
		document.getElementById(min).innerHTML = m;
		document.getElementById(sec).innerHTML = s;

		// 2.1
		//		time = oldTime;

		// 3.1 2.1
		window.setTimeout(function () {
			startCountdown(day, hrs, min, sec, countdownBox, watchBtn, time);
		}, delay);

		var currentTime = new Date().getTime();
		console.log("Time(MilliSecond):" + currentTime + "   Time(Second):" + Math.round(currentTime / 1000) + "    CountTime(second):" + time);
	}

	//	A.merge("countdowntime", function ()
	//	{
	//		A.init(function ()
	//		{
	//			function formatShowTime(time)
	//			{
	//				var endTimeStr = "", second = time, tempDataMinutes = second - (new Date).getTime();
	//				if (tempDataMinutes < 0)
	//				{
	//					var zerohtml = "<span class='op-countdowntime-showtimeNumber'>0</span><span class='op-countdowntime-showtimeText'>天</span><span class='op-countdowntime-showtimeNumber'>0</span><span class='op-countdowntime-showtimeText'>小时</span><span class='op-countdowntime-showtimeNumber'>0</span><span class='op-countdowntime-showtimeText'>分</span><span class='op-countdowntime-showtimeNumber'>0</span><span class='op-countdowntime-showtimeText'>秒</span>";
	//					return $container.find(".op-countdowntime-showtime p").html(zerohtml), void 0
	//				}
	//				var dayTime = Math.floor(tempDataMinutes / 864e5);
	//				surplusDay = dayTime > 0 ? dayTime : 0, endTimeStr += dayTime > 0 ? "<span class='op-countdowntime-showtimeNumber'>" + dayTime + "</span><span class='op-countdowntime-showtimeText'>天</span>" : "";
	//				var leave1 = tempDataMinutes % 864e5, hoursTime = Math.floor(leave1 / 36e5);
	//				if ("" == endTimeStr)endTimeStr += hoursTime > 0 ? "<span class='op-countdowntime-showtimeNumber '>" + hoursTime + "</span><span  class='op-countdowntime-showtimeText'>小时</span>" : "";
	//				else endTimeStr += "<span class='op-countdowntime-showtimeNumber'>" + hoursTime + "</span><span  class='op-countdowntime-showtimeText'>小时</span>";
	//				var leave2 = leave1 % 36e5, minutes = Math.floor(leave2 / 6e4);
	//				if ("" == endTimeStr)endTimeStr += minutes > 0 ? "<span class='op-countdowntime-showtimeNumber'>" + minutes + "</span><span  class='op-countdowntime-showtimeText'>分</span>" : "";
	//				else endTimeStr += "<span class='op-countdowntime-showtimeNumber'>" + minutes + "</span><span  class='op-countdowntime-showtimeText'>分</span>";
	//				var leave3 = leave2 % 6e4, seconds = Math.floor(leave3 / 1e3);
	//				endTimeStr += "<span class='op-countdowntime-showtimeNumber'>" + seconds + "</span><span  class='op-countdowntime-showtimeText'>秒</span>", $container.find(".op-countdowntime-showtime p").html(endTimeStr),
	//						setTimeout(function ()
	//				{
	//					formatShowTime(time)
	//				}, 1e3);
	//			}
	//		});
	//	});
</script>

</body>
</html>